<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#wai{
				width: 960px;
				border: 0px red solid;
				margin: 50px auto;
			}
			.dang{
				float: left;
				margin: 5px 560px 10px 0px ;
				border: 0px #333333 solid;
			}
			#wai>p{
				font-weight: bold;
				line-height: 50px;
				border: 0px #333333 solid;
				position: relative;
				}
			#wai>p>a{
				margin: 0px 10px 0px 50px ;
				padding: 5px;
				background-color: #EAFFFA;
				color: #838685;
				font-size: 14px;
				font-weight: lighter;
				text-decoration: none;
				border: 1px #D7F1EA solid;
			}
			
			.feng{
				position: absolute;
				right: 170px;
				bottom: 33px;
			}
			.hang{
				border: 1px red solid;
				width: 960px;
			    float: left;
				margin: 10px 0px ;
				background-color: #FE6915;
			}
			.hang a{
				text-decoration: none;
				color: #fff;
				margin: 0px 10px;
			}
			#tupian{
				margin: 12px 0px;
			}
			/* ,图片使跟随book 父框来动的,子绝父相 */
			#book{
				position: relative;
				left: 0px;
				top: 0px;
				border: 1px #DDF0C6 solid;
				margin: 10px 0px;
				padding-top: 70px;
				padding-bottom: 25px;
			}
			#book #left{
				width:598px ;
				/* border: 1px solid blue; */
				box-sizing: border-box;				
				float: left;			
				position:relative;
			}
			#left img{
				float: left;
			}
			#left .content{
				width: 338px;
				float: left;
				padding-right: 10px;
				box-sizing: border-box;
			}
			#book #right{
				width:330px ;
				/* border: 1px solid green; */
				box-sizing: border-box;
				float: left;
			}
			/* 后代选择器
			id 和选择器的区别,id在页面里边只有一个,不许重复
			 */
			#book .bg_bang{
				/* 定位= 定位模式,偏移 */
				position: absolute;
				/* 在浏览器端调整出来的 */
				left: -13px;
				top:11px
			}
			#rightShang{
				position: relative;
			}
			#rightShang img{
				float: left;
			} 
			#rightShang .content{
				float: left;
				width:250px;
			} 
			#rightXia{
				margin-top: 20px;
				position:relative;
			}
			#rightXia img{
				float: left;
			} 
			#rightXia .content{
				float: left;
				width:260px;
			} 
			.content h4{
				font-weight: normal;
				color: #528CC6;
				font-size: 14px;
			}
			.content p{
				font-size: 12px;
				line-height: 30px;
			}
			.price{
				color: #935284;
			}
			.zhe{
				font-size: 10px;
				color: #73B1A1;
			}
			
			.cls{
				height: 0px;
				clear: both;
			}
			
			#xia img{
				vertical-align: middle;
				
			}
			#xia{
				color: #666;
				font-size: 12px;
				text-align: center;
			}
			#no1{
				position: absolute;
				top: -5px;
				left: 20px;
			}
			#no2{
				position: absolute;
				top: -9px;
				left: 5px;
			}
			#no3{
				position: absolute;
				top: -9px;
				left: 5px;
			}
			#shuqian{
				position: absolute;
				top: 11px;
				left: -12px;
			}
		</style>
</head>
	<body>
	<div id="wai">
	<p>
		<img src="pic/logo.jpg" class="dang"><img src="pic/icon_count.png" class="feng">
		<a href="#">尾品汇 当当优品 数字馆 都看阅器</a>
	</p>
	<div class="hang">
		<a href="#">首页</a>
		<a href="#">图书</a>
		<a href="#">音像</a>
		<a href="#">童装</a>
		<a href="#">服装</a>
		<a href="#">鞋靴</a> 
		<a href="#">运动</a> 
		<a href="#">箱包</a> 
		<a href="#">美妆</a>
		<a href="#">珠宝</a>
		<a href="#">家居</a> 
		<a href="#">食品</a>
		<a href="#">酒</a>
		<a href="#">手机</a> 
		<a href="#">数码</a> 
		<a href="#">电脑</a>
		<a href="#">家电</a>
	</div>
	<div class="tupian">
		<img src="pic/banner.png" >
	</div>
	<div id="book">
			<img src="./pic/bg_bang.gif" class="bg_bang" alt="">
			<div id="left">		
			<img src="pic/book-01.jpg" class="book" >
			<img src="pic/bookNo1.gif"  id="no1">					
	<div class="content">
			<h4>偷影子的人 </h4>
			<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
			<p>出版社：湖南文艺出版社</p>
			<p>当当价：<span class="price">￥ 17.90</span></p>
			<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，
			一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，
			因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
	</div>					
	</div>
		<div id="right">
		<div id="rightShang">
			<img src="pic/book-02.jpg" >
			<img src="pic/bookNo2.gif"  id="no2">
		<div class="content">
			<h4>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </h4>
			<p>作 者：柴静 著</p>
			<p>出版社：广西师范大学出版社</p>
			<p><span class="price">￥ 29.90</span> <span class="zhe">7.4折</span></p>
	</div>
	</div>
	<div class="cls"></div>
	<div id="rightXia">
			<img src="pic/book-03.jpg" >		
			<img src="pic/bookNo3.gif"  id="no3">
	<div class="content">
			<h4>改变孩子先改变自己</h4>
			<p>作 者：贾容韬 贾毅 著</p>
			<p>出版社：作家出版社</p>
			<p><span class="price">￥ 22.20</span> <span class="zhe">7.4折</span></p>					
	</div>
	</div>
	</div><div class="cls"></div></div>
	<div id="xia">
			Copyright (C) 当当网 2004-2017, All Rights Reserved <img src="pic/validate.gif"> 京ICP证041189号出版物经营许可证 新出发京批字第直0673号
	</div>
</div>
	</body>
</html>
<!-- 尾品汇
当当优品
数字馆
都看阅器
首页 
图书 
音像 
童装 
服装 
鞋靴 
运动 
箱包 
美妆 
珠宝 
家居 
食品 
酒 
手机 
数码 
电脑 
家电

偷影子的人 
作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译

出版社：湖南文艺出版社

当当价：￥ 17.90

不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，
今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强
大：他 能“偷别人的影子”，因而能看见他

看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 
作 者：柴静 著
出版社：广西师范大学出版社
￥ 29.40 7.4折
改变孩子先改变自己 
作 者：贾容韬 贾毅 著

出版社：作家出版社

￥ 22.20 7.4折

Copyright (C) 当当网 2004-2017, All Rights Reserved京
ICP证041189号出版物经营许可证 新出发京批字第直0673号
 -->